<template>
    <div class="dataAssetDetail">
      <el-card
        :body-style="{
          padding: '10px 20px',
        }"
      >
        <el-button size="small" @click="goBack">返回</el-button>
        <div class="dataAssetDetail-top">
          <el-row :gutter="20">
            <el-col :span="14">
              <div class="data-title">管线（un94_02_cms20_pipeline)</div>
              <!-- <div class="data-subt">数据中台>共享层</div> -->
              <!-- <div class="data-dec">
                              <span>表描述：</span>
                              <p>1）管线是指管线的基本信息，管线包含单位长度管线抗、单位长度管线阻、管线编码、管线规格、管线长度、管线承压、管线名称、管线运行状态等主要属性。</p>
                          </div> -->
              <ul class="data-list">
                <li class="flex flex-space-between">
                  <div class="flex flex-stretch flex-center">
                    <span>所属部门：</span>
                    <p>{{ infoData.depart }}</p>
                  </div>
                  <div class="flex flex-stretch flex-center">
                    <span>应用主题：</span>
                    <p>{{ infoData.applyTheme }}</p>
                  </div>
                  <div class="flex flex-stretch flex-center">
                    <span>业务场景：</span>
                    <p>{{ infoData.busiScen }}</p>
                  </div>
                </li>
                <li class="flex flex-space-between">
                  <div class="flex flex-stretch flex-center">
                    <span>数据类型：</span>
                    <p>{{ infoData.dataType }}</p>
                  </div>
                  <div class="flex flex-stretch flex-center">
                    <span>负面清单类型：</span>
                    <p>{{ infoData.nagatType }}</p>
                  </div>
                  <div class="flex flex-stretch flex-center">
                    <span>项目空间名：</span>
                    <p>{{ infoData.proSpace }}</p>
                  </div>
                </li>
                <li class="flex flex-space-between">
                  <div class="flex flex-stretch flex-center">
                    <span>数据规模：</span>
                    <p>{{ infoData.dataScale }}</p>
                  </div>
                  <div class="flex flex-stretch flex-center">
                    <span>来源系统：</span>
                    <p>{{ infoData.source }}</p>
                  </div>
                  <div class="flex flex-stretch flex-center">
                    <span>表路径：</span>
                    <p>{{ infoData.tablePath }}</p>
                  </div>
                </li>
                <li class="flex flex-space-between">
                  <div class="flex flex-stretch flex-center">
                    <span>申请次数：</span>
                    <p>{{ infoData.applyNum }}</p>
                  </div>
                  <div class="flex flex-stretch flex-center">
                    <span>表创建时间：</span>
                    <p>{{ infoData.createTime }}</p>
                  </div>
                  <div class="flex flex-stretch flex-center">
                    <span>表最后更新时间：</span>
                    <p>{{ infoData.updateTime }}</p>
                  </div>
                </li>
                <li class="flex flex-space-between">
                  <div class="flex flex-stretch flex-center">
                    <span>数据库类型：</span>
                    <p>{{ infoData.dataType }}</p>
                  </div>
                  <div class="flex flex-stretch flex-center">
                    <span>是否权威数据：</span>
                    <p>{{ infoData.powerFlag }}</p>
                  </div>
                  <div class="flex flex-stretch flex-center">
                    <span>是否主数据：</span>
                    <p>{{ infoData.mainFlag }}</p>
                  </div>
                </li>
                <li class="flex flex-space-between">
                  <div class="flex flex-stretch flex-center">
                    <span>表描述：</span>
                    <p>{{ infoData.remark }}</p>
                  </div>
                </li>
              </ul>
            </el-col>
            <el-col :span="10">
              <div class="data-right">
                <div
                  class="data-right-title flex flex-center"
                  style="width: 30vw"
                >
                  完整度：<el-progress
                    class="flex-stretch"
                    text-color="#006569"
                    :stroke-width="20"
                    :percentage="infoData.integ"
                  ></el-progress>
                </div>
                <div
                  class="data-right-title flex flex-center"
                  style="width: 30vw"
                >
                  评分：<el-rate
                    v-model="infoData.score"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate>
                </div>
                <div
                  class="data-right-title flex flex-center"
                  style="width: 30vw"
                >
                  申请次数：<span style="color: #000">{{
                    infoData.applyNum
                  }}</span
                  >次
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="dataAssetDetail-tabs">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="详细信息" name="first">
              <div class="tables">
                <div class="dataAssetDetaol-title">业务信息</div>
                <div style="padding-left: 100px">
                  <ul class="table-list">
                    <li>
                      <span>业务域</span>
                      <span>业务流程</span>
                      <span>业务活动</span>
                    </li>
                    <li>
                      <span>{{ detailData.ywArea }}</span>
                      <span>{{ detailData.ywFlow }}</span>
                      <span>{{ detailData.ywActive }}</span>
                    </li>
                  </ul>
                  <ul class="table-list table-list1" style="margin-bottom: 20px">
                    <li>
                      <span>业务活动描述</span>
                      <span>一级业务目录</span>
                      <span>二级业务分类</span>
                    </li>
                    <li>
                      <span>{{ detailData.ywActiveMark }}</span>
                      <span>{{ detailData.ywOneDir }}</span>
                      <span>{{ detailData.ywTwoType }}</span>
                    </li>
                  </ul>
                </div>
  
                <div class="dataAssetDetaol-title">存储信息</div>
                <div style="padding-left: 100px">
                  <ul class="table-list" style="margin-bottom: 20px">
                    <li>
                      <span>系统名称</span>
                      <span>数据库</span>
                      <span>库表名称</span>
                    </li>
                    <li>
                      <span>{{ detailData.xtName }}</span>
                      <span>{{ detailData.xtDataBase }}</span>
                      <span>{{ detailData.xtDataTable }}</span>
                    </li>
                  </ul>
                </div>
  
                <div class="dataAssetDetaol-title">单位信息</div>
                <div style="padding-left: 100px">
                  <ul class="table-list table-list2">
                    <li>
                      <span>管理单位</span>
                      <span>覆盖部门（或子公司）</span>
                    </li>
                    <li>
                      <span>{{ detailData.glDw }}</span>
                      <span>{{ detailData.glDept }}</span>
                    </li>
                  </ul>
                </div>
  
                <div
                  class="data-btn flex flex-justify-center"
                  style="margin-top: 20px"
                >
                  <el-button size="small" icon="el-icon-plus" type="primary"
                    >加入购物车</el-button
                  >
                  <el-button size="small" icon="el-icon-star-on" type="primary"
                    >收藏</el-button
                  >
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="样例数据" name="second">
              <div class="dataAssetDetaol-title">数据预览</div>
              <div class="table-box">
                <el-table
                  :data="tableData"
                  border
                  :header-cell-style="{
                    fontSize: '16px',
                    backgroundColor: '#f8f8f8',
                    color: '#333',
                  }"
                  style="width: 100%"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    align="center"
                    width="80"
                  >
                  </el-table-column>
                  <el-table-column prop="date" label="字段英文名" align="center">
                  </el-table-column>
                  <el-table-column prop="name" align="center" label="字段中文名">
                  </el-table-column>
                  <el-table-column prop="name" align="center" label="字段描述">
                  </el-table-column>
                  <el-table-column prop="name" align="center" label="字段类型">
                  </el-table-column>
                  <el-table-column prop="name" align="center" label="是否主键">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    align="center"
                    label="是否敏感数据"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    align="center"
                    label="是否基础数据"
                  >
                  </el-table-column>
                </el-table>
                <div class="table-page flex flex-end">
                  <el-pagination
                    :page-size="100"
                    layout="prev, pager, next, jumper"
                    :total="1000"
                  >
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="概要信息" name="third">
              <div class="outline-info">
                <!-- <div class="outline-info-top">
                  <span>数据来源：xxxx</span>
                  <span>所属部门：xxxx</span>
                  <span>项目空间名：xxxx</span>
                  <span>数据库类型：xxxx</span>
                  <span>数据规模：xxxx</span>
                  <span>字段数量：xxxx</span>
                  <span>创建时间：xxxx</span>
                </div> -->
                <div class="dataAssetDetaol-title">包含字段(45)</div>
                <div class="form-search flex flex-space-between">
                  <div class="input-box">
                    <el-input placeholder="请输入字段英文或中文名称">
                      <i class="el-icon-search el-input__icon" slot="suffix"> </i>
                    </el-input>
                    <el-button type="primary">查询</el-button>
                    <el-button>重置</el-button>
                  </div>
                  <el-button type="primary" icon="el-icon-download"
                    >导出表结构</el-button
                  >
                </div>
                <div class="table-box">
                  <el-table
                    :data="tableData"
                    border
                    :header-cell-style="{
                      fontSize: '16px',
                      backgroundColor: '#f8f8f8',
                      color: '#333',
                    }"
                    style="width: 100%"
                  >
                    <el-table-column
                      type="index"
                      label="序号"
                      align="center"
                      width="80"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="date"
                      label="字段英文名"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      align="center"
                      label="字段中文名"
                    >
                    </el-table-column>
                    <el-table-column prop="name" align="center" label="字段描述">
                    </el-table-column>
                    <el-table-column prop="name" align="center" label="字段类型">
                    </el-table-column>
                    <el-table-column prop="name" align="center" label="是否主键">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      align="center"
                      label="是否敏感数据"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      align="center"
                      label="是否基础数据"
                    >
                    </el-table-column>
                  </el-table>
                  <div class="table-page flex flex-end">
                    <el-pagination
                      :page-size="100"
                      layout="prev, pager, next, jumper"
                      :total="1000"
                    >
                    </el-pagination>
                  </div>
                </div>
                <div class="dataAssetDetaol-title">分区字段信息</div>
                <div class="table-box">
                  <el-table
                    :data="tableData1"
                    border
                    :header-cell-style="{
                      fontSize: '16px',
                      backgroundColor: '#f8f8f8',
                      color: '#333',
                    }"
                    style="width: 100%"
                  >
                    <el-table-column
                      type="index"
                      label="序号"
                      align="center"
                      width="80"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="fieldEn"
                      label="字段英文名"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <span style="color: #006569">{{
                          scope.row.fieldEn
                        }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="fieldCn"
                      align="center"
                      label="字段中文名"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="fieldMark"
                      align="center"
                      label="字段描述"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="fieldType"
                      align="center"
                      label="字段类型"
                    >
                    </el-table-column>
                  </el-table>
                  <!-- <div class="table-page flex flex-end">
                    <el-pagination
                      :page-size="100"
                      layout="prev, pager, next, jumper"
                      :total="1000"
                    >
                    </el-pagination>
                  </div> -->
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="血缘关系" name="fourth">
              <!-- <div id="mountNode"></div> -->
            </el-tab-pane>
            <el-tab-pane label="权限控制" name="fourth1">
                <div class="no-data flex flex-justify-center">
                    <img src="../assets/images/no-data.png" alt="">
                </div>
            </el-tab-pane>
            <el-tab-pane label="知识中心" name="fourth2">
                <div class="no-data flex flex-justify-center">
                    <img src="../assets/images/no-data.png" alt="">
                </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </div>
  </template>
  <script>
  import { RelationshipDiagram } from "../utils/relationshipDiagram";
  import { getSearDetail, getSearPart, mlGetBiaoDetail } from "../serve/api";
  
  export default {
    data() {
      return {
        infoData: {
          categoryId: "",
          dbName: "",
          depart: "",
          fieldNum: "",
          nagatType: "",
          dataScale: "",
          dataType: "",
          tablePath: "",
          source: "",
          applyNum: "",
          integ: 0,
          score: "",
          proSpace: "",
          dbType: "",
          applyTheme: "",
          busiScen: "",
          assoStatus: "",
          dbStatus: "",
          assoView: "",
          remark: "",
          mainFlag: "",
          powerFlag: "",
        },
        rateValue: 5,
        activeName: "first",
        tableData: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
        tableData1: [],
        detailData: {
          tableId: "1",
          ywArea: "221",
          ywFlow: "22",
          ywActive: "222",
          ywActiveMark: "223",
          ywOneDir: "224",
          ywTwoType: "115",
          xtName: "116",
          xtDataBase: "117",
          xtDataTable: "8",
          glDw: "9",
          glDept: "10",
        },
        id: "1",
      };
    },
    created() {
      this.id = this.$route.query.id || "";
    },
    mounted() {
      this.getSearDetailData();
      this.getSearPartData();
      this.getInfoData();
    },
    methods: {
      getInfoData() {
        mlGetBiaoDetail({ id: this.id }).then((res) => {
          console.log(res);
          this.infoData = res;
        });
      },
      getSearPartData() {
        getSearPart({ tableId: this.id }).then((res) => {
          console.log(res);
          this.tableData1 = res;
        });
      },
      getSearDetailData() {
        getSearDetail({ tableId: this.id }).then((res) => {
          console.log(res);
          this.detailData = res;
        });
      },
      handleClick(tab, event) {
        if (tab.name == "fourth") {
          const relationshipDiagram = new RelationshipDiagram();
          relationshipDiagram.render();
        }
      },
      goBack() {
        this.$router.go(-1);
      },
    },
  };
  </script>
  <style lang="less" scoped>
  #mountNode {
    height: 400px;
  }
  /deep/.el-button--small {
    padding: 9px 30px;
    margin-bottom: 20px;
  }
  /* top */
  .dataAssetDetail-top {
    .data-title {
      font-size: 20px;
      color: black;
      font-weight: 800;
    }
  
    .data-subt {
      font-size: 14px;
      color: #989898;
      margin: 15px 0;
    }
  
    .data-dec {
      font-size: 16px;
      display: flex;
      margin-bottom: 15px;
  
      span {
        flex-shrink: 0;
        color: #989898;
      }
  
      p {
        line-height: 1.7;
      }
    }
  
    .data-list {
      padding-top: 20px;
      li {
        font-size: 14px;
        margin-bottom: 15px;
        span {
          color: #989898;
        }
  
        p {
          color: #000;
        }
      }
    }
  
    .data-right {
      padding-top: 40px;
      box-sizing: border-box;
  
      .data-right-title {
        color: #989898;
        margin-bottom: 20px;
      }
    }
  }
  
  /* tabs */
  .dataAssetDetail-tabs {
    padding-top: 40px;
  
    .dataAssetDetaol-title {
      font-size: 20px;
      color: #000;
      position: relative;
      font-weight: 700;
      padding-left: 15px;
      margin-bottom: 20px;
  
      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: #006569;
      }
    }
  
    /**重写el-tabs样式 */
    /deep/.el-tabs__item {
      font-size: 16px;
    }
  
    /deep/.el-tabs__item.is-active {
      font-size: 16px;
      font-weight: bold;
    }
  }
  
  .outline-info {
    padding: 20px 30px;
  }
  
  .outline-info-top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 20px;
    row-gap: 30px;
    margin-bottom: 60px;
  }
  
  .input-box {
    display: grid;
    grid-template-columns: 500px 100px 100px;
    column-gap: 20px;
  }
  
  .table-box {
    margin-top: 20px;
  }
  .table-list {
    li {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-column: 20;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      border: 1px solid #dfe2e8;
      &:first-child {
        background-color: rgb(248, 248, 248);
        color: rgb(51, 51, 51);
        font-weight: 700;
        border-bottom-color: transparent;
      }
      span {
        text-align: center;
        height: 100%;
        &:nth-of-type(2) {
          border-right: 1px solid #dfe2e8;
          border-left: 1px solid #dfe2e8;
        }
      }
    }
  }
  .table-list1 {
    li {
      &:first-child {
        border-top-color: transparent;
        background-color: rgb(248, 248, 248);
        color: rgb(51, 51, 51);
        font-weight: 700;
        border-bottom-color: transparent;
      }
    }
  }
  .table-list2 {
    li {
      display: grid;
      grid-template-columns: 1fr 2fr;
    }
  }
  .no-data {
    padding: 100px 0;
    img {
        width: 200px;
    }
  }
  </style>
  